<template>
  <div>
    <div class="icon-con">
      <van-grid :border="false" :column-num="4">
        <van-grid-item
          class="icon-item"
          v-for="item in iconList"
          :key="item.designKindId"
          @click="goScene(item)"
        >
          <img :src="item.thumbUrl" />
          <span>{{ item.name }}</span>
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  props: [],
  data() {
    return {
      iconList: [],
    };
  },
  created() {
    this.getIcon();
  },
  methods: {
    //获取图片导航数据列表
    async getIcon() {
      const res = await this.$API(
        "/vv/mobile/main/getMainMiniProgramHomeInfo.do"
      );
      if (res.status !== 200)
        return this.$notify({ type: "danger", message: "请求失败" });
      this.iconList = res.data.body.data.scene.slice(0, 8);
    },
    //点击图标，导航到scene页面
    goScene(item) {
      this.$router.push({
        path: "/scene",
        query: { kindId: item.designKindId, n: item.name },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.icon-item {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  img {
    width: 55px;
    margin-bottom: 10px;
  }
}
</style>